<template>
  <div class="box hkj">
    <Header>
      优惠券
    </Header>
    <ul class="top">
      <li :class="state === 1 ? 'active' : '' " @click="wy">
        未使用
      </li>
      <li :class="state === 2 ? 'active' : '' " @click="yy">
        已使用
      </li>
      <li :class="state === 3 ? 'active' : '' " @click="ygq">
        已过期
      </li>
    </ul>
    <div v-if="kg" class="all">
      <ul class='coupon-main'>
        <li v-for="i of show" :key="i.couponid">
          <div :class="state === 1 ? 'main-top' : 'main-active'"></div>
          <h3>{{ i.name }}</h3>
          <strong :class="state === 1 ? 'fff' : 'ccc'">
            {{ state === 2 ? '已使用' : '已过期' }}
          </strong>
          <span>{{ i.contip }}</span>
          <p>有效期 {{ i.startdate }}至{{ i.enddate }}   00:00-23:59</p>
        </li>
      </ul>
    </div>
    <div v-else class="all">
      {{ tip }}
    </div>
  </div>
</template>
<style lang="scss">
  @import '@/lib/reset.scss';
  .hkj,.all {
    @include rect(100%,100%);
    @include background-color(#f5f5f9);
    @include overflow();
  }
  .hkj {
    @include flexbox();
    @include flex-direction(column);
    header {
      @include flexbox();
      @include justify-content(space-between);
    }
    .top {
      @include rect(100%,0.5rem);
      @include flexbox();
      @include justify-content(space-around);
      @include background-color(#fff);
      .active {
        @include color(#ef7830);
        @include border(0 0 2px,#ef7830,solid);
      }
      li {
        @include rect(25%,100%);
        @include flexbox();
        @include justify-content(space-around);
        @include align-items();
      }
    }
    .coupon-main {
      @include flex(); // -webkit-box-flex: 1;-ms-flex: 1;flex: 1;width: .1px;
      @include rect(100%,auto);
      @include flexbox();
      @include flex-direction(column);
      @include align-items();
      @include overflow();
      li {
        @include rect(94%, 1.3rem);
        @include background-color(#fff);
        @include margin(0.1rem 0 0 0);
        @include border-radius(0.05rem);
        @include flexbox();
        @include flex-direction(column);
        position: relative;
        strong {
          @include color(#fff);
          @include rect(0.7rem,0.26rem);
          @include border-radius(0.13rem);
          @include font-weight(normal);
          @include text-align();
          @include line-height(0.26rem);
          position: absolute;
          top: 0.5rem;
          left: 75%;
        }
        .fff {
          @include background-color(#fff);
        }
        .ccc {
          @include background-color(#ccc);
        }
        .main-top {
          @include rect(100%,0.05rem);
          @include border-radius(0.05rem 0.05rem 0 0);
          @include background-color(#d22);
        }
        .main-active {
          @include rect(100%,0.05rem);
          @include border-radius(0.05rem 0.05rem 0 0);
          @include background-color(#ccc);
        }
        h3 {
          @include rect(90%,0.3rem);
          @include margin(0.2rem 0 0);
          @include padding(0 5% 0);
          @include font-size(0.2rem);
          @include font-weight(normal);
        }
        span {
          @include display(block);
          @include rect(90%,0.3rem);
          @include margin(0.06rem 0 0);
          @include color(#666);
          @include padding(0 5% 0);
        }
        p {
          @include padding(0 3% 0);
          @include line-height(0.3rem);
          @include font-size(0.12rem);
          @include color(#999);
          @include rect(100%,0.3rem);
          @include border(1px 0 0,#ddd,dashed);
          position: absolute;
          bottom: 0;
        }
      }
    }
  }
</style>
<script>
import axios from '@/utils/request'
import Header from '@/components/header.vue'
export default {
  data () {
    return {
      show: '',
      kg: true,
      tip: '你没有优惠券哦',
      state: 1
    }
  },
  components: {
    Header
  },
  watch: {
    state: {
      handler (newdata) {
        const userid = localStorage.getItem('userid')
        axios.get(`/coupon?userid=${userid}&state=${newdata}`).then(res => {
          if (res.data.code === '111' || res.data.code === '122') {
            this.$router.push('/login')
          } else {
            if (res.data.code === '11010') {
              this.kg = false
              this.tip = '你没有优惠券哦'
            } else {
              this.show = res.data.data.reverse()
              if (this.show.length === 0) {
                this.kg = false
                if (this.state === 1) {
                  this.tip = '你没有可用优惠券哦'
                }
                if (this.state === 2) {
                  this.tip = '你没有用过的优惠券哦'
                }
                if (this.state === 3) {
                  this.tip = '你没有过期的优惠券哦'
                }
              } else {
                this.kg = true
              }
            }
          }
        })
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    wy () {
      this.state = 1
    },
    yy () {
      this.state = 2
    },
    ygq () {
      this.state = 3
    }
  }
}
</script>
